<%--
  Created by IntelliJ IDEA.
  User: abcc
  Date: 2019/9/30
  Time: 15:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="${path}/css/person/focuson.css">
    <link rel="stylesheet" href="${path}/plugins/layui/css/layui.css" type="text/css">
    <script src="${path}/plugins/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="${path}/css/person/images/datepicker3.css" type="text/css">

</head>

<body>
<!--导航-->
<%@include file="../sharedper/nav.jsp"%>
<!-- 主体部分 -->
<div class="container" style="margin-top: 61px;width: 1015px">
    <div class="userinfo user">
        <div class="myart">
            <p class="person" id="userinfo_head1">个人资料</p>
            <p id="userinfo_head2">宠物信息</p>
        </div>

        <div id="block1">
            <form class="layui-form layui-form-pane" action="${path}/edit/info" method="post" enctype="multipart/form-data" onsubmit="return window.person()">
                  <%--onsubmit="alert('修改个人资料成功,即将跳回主页面')">--%>
                <%--<form class="layui-form layui-form-pane" action="javascript:jg()" method="post">--%>
            <div class="thumb" id="preview">
                <img id="perimghead" src="${sessionScope.info.picfilename}"  style="width: 120px;
                        height: 120px;border-radius: 50%;">
            </div>

            <div class="thumbinfo" >
                <label title="上传图片" for="inputImage" class="btn btn-default btn-xs">
                    <input type="file" accept="image/*" id="inputImage" class="hide" name="picfilename" onchange="perimgChange(this)"> 上传新图片
                    <input type="text" class="hide" id="newimg" >
                </label>
                <p>（上传格式仅为JPEG、PNG格式： 800KB以内）</p>
            </div>

            <div class="layui-row">
                <div class="layui-col-md8 layui-col-md-offset2">

                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                        <legend>个人资料卡</legend>
                    </fieldset>
                        <input type="hidden" name="id" value="${sessionScope.info.id}">
                        <div class="layui-form-item">
                            <label class="layui-form-label">昵称</label>
                            <div class="layui-input-block">
                                <input type="text" name="uName" lay-verify="required" placeholder="请输入"
                                       autocomplete="off" class="layui-input" value="${sessionScope.info.uName}">
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <label class="layui-form-label">请选择地区</label>
                            <div class="layui-input-inline">
                                <select name="province" id="province" lay-verify="required" lay-search
                                        lay-filter="province">
                                    <option selected value="${sessionScope.info.province}">${sessionScope.info.province}</option>
                                </select>
                            </div>
                            <div  class="layui-input-inline">
                                <select name="city" id="city" lay-verify="required" lay-search lay-filter="city">
                                    <option selected value="${sessionScope.info.city}">${sessionScope.info.city}</option>
                                </select>
                            </div>
                            <div  class="layui-input-inline">
                                <select name="district" id="district" lay-verify="required" lay-search>
                                    <option value="${sessionScope.info.district}">${sessionScope.info.district}</option>
                                </select>
                            </div>
                        </div>


                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-inline">
                                <c:if test="${sessionScope.info.uSex==0}">
                                    <input type="radio" name="uSex" value="0" title="男" checked="">
                                    <input type="radio" name="uSex" value="1" title="女">
                                </c:if>
                                <c:if test="${sessionScope.info.uSex==1}">
                                    <input type="radio" name="uSex" value="0" title="男">
                                    <input type="radio" name="uSex" value="1" title="女" checked="">
                                </c:if>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">日期选择</label>
                                <div class="layui-input-inline layer-date">
                                    <input type="date" name="uBirthday" id="hello" autocomplete="off"
                                           class="layui-input" value="<fmt:formatDate value='${sessionScope.info.uBirthday}' pattern='yyyy-MM-dd'/>">
                                </div>
                            </div>

                        </div>



                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">个人简介</label>
                            <div class="layui-input-block">
                                <textarea placeholder="请输入内容" class="layui-textarea" name="uStatement">${sessionScope.info.uStatement}</textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit=""
                                        lay-filter="demo1">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                </div>
            </div>
            </form>
        </div>


        <div id="block2" style="display:none;">
            <%--必须要加上enctype="multipart/form-data"  不然会报错--%>
            <form class="form-horizontal col-md-offset-3" role="form" action="${path}/edit/addpet" method="post" enctype="multipart/form-data" onsubmit="return window.deitpet()">
            <div class="thumb" style="margin-left: 190px">
                <img id="imghead" src="${requestScope.pet.picurl}" style="width: 120px;
                                height: 120px;border-radius: 50%;" alt="请上传宠物头像">

            </div>
            <div class="thumbinfo" style="margin-left: -240px" id="img_box">
                <label title="上传图片" for="files" class="btn btn-default btn-xs">
                    <input type="file" accept="image/*"  id="files" class="hide" name="picurl" onchange="imgChange(this)"> 上传新图片
                    <input class="hide" type="text" id="petimg">
                </label>
                <p>（上传格式仅为JPEG、PNG格式： 800KB以内）</p>
            </div>
                <br>
                <br>
                <h5 class="form-title"> <b>宠物资料</b></h5>
                <input value="${requestScope.pet.pId}" name="pId" type="hidden">
                <%--用于添加的时候--%>
                <input value="${sessionScope.user.id}" name="id" type="hidden">
                <!-- <p>基本信息</p> -->
                <div class="form-group">
                    <label for="firstname" class="col-sm-2 control-label">昵称</label>
                    <div class="col-sm-5">
                        <input type="text" name="pName" class="form-control" id="firstname" placeholder="请输入名字" value="${requestScope.pet.pName}">
                    </div>
                </div>
                <div class="form-group" id="data">
                    <label class="col-sm-2 control-label">生日</label>
                    <div class="col-sm-5">
                        <!-- <input type="text" class="form-control" id="lastname" placeholder="请输入生日"> -->
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                            <input type="date" class="form-control" name="pBirthday"  value="<fmt:formatDate value='${requestScope.pet.pBirthday}' pattern='yyyy-MM-dd'/>">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-2">
                        <%--<div>--%>
                            <c:if test="${requestScope.pet == null}">
                                <label>
                                    <input type="radio"   name="pSex" value="0" checked="">公
                                </label>
                                <label>
                                    <input type="radio" name="pSex" value="1">母
                                </label>
                            </c:if>
                            <c:if test="${requestScope.pet.pSex==0}">
                            <label>
                                <input type="radio" checked="" name="pSex" value="0">公
                            </label>
                            <label>
                                <input type="radio" name="pSex" value="1">母
                            </label>
                            </c:if>
                            <c:if test="${requestScope.pet.pSex==1}">
                                <label>
                                    <input type="radio" name="pSex" value="0">公
                                </label>
                                <label>
                                    <input type="radio" checked="" name="pSex" value="1">母
                                </label>
                            </c:if>
                        <%--</div>--%>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">品种</label>
                    <div class="col-sm-3">
                        <select class="form-control" name="pType">
                            <option value="-1">请选择品种</option>
                            <c:forEach items="${requestScope.plist}" var="p">
                                <c:if test="${requestScope.pet.pType eq p.id}">
                                    <option selected value="${p.id}">${p.type}</option>
                                </c:if>
                                <c:if test="${requestScope.pet.pType ne p.id}">
                                    <option value="${p.id}">${p.type}</option>
                                </c:if>
                            </c:forEach>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">年龄</label>
                    <div class="col-sm-2">
                        <select class="form-control" name="pAge">

                            <option value="1" <c:if test="${requestScope.pet.pAge == 1}">selected</c:if>>1岁</option>
                            <option value="2" <c:if test="${requestScope.pet.pAge == 2}">selected</c:if>>2岁</option>
                            <option value="3" <c:if test="${requestScope.pet.pAge == 3}">selected</c:if>>3岁</option>
                            <option value="4" <c:if test="${requestScope.pet.pAge == 4}">selected</c:if>>4岁</option>
                            <option value="5" <c:if test="${requestScope.pet.pAge == 5}">selected</c:if>>5岁</option>
                            <option value="6" <c:if test="${requestScope.pet.pAge == 6}">selected</c:if>>6岁</option>
                            <option value="7" <c:if test="${requestScope.pet.pAge == 7}">selected</c:if>>7岁</option>
                            <option value="8" <c:if test="${requestScope.pet.pAge == 8}">selected</c:if>>8岁</option>
                            <option value="9" <c:if test="${requestScope.pet.pAge == 9}">selected</c:if>>9岁</option>
                            <option value="10" <c:if test="${requestScope.pet.pAge == 10}">selected</c:if>>10岁</option>
                            <option value="11" <c:if test="${requestScope.pet.pAge == 11}">selected</c:if>>11岁</option>
                            <option value="12" <c:if test="${requestScope.pet.pAge == 12}">selected</c:if>>12岁</option>
                        </select>
                    </div>
                </div>



                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-5" style="text-align: right">
                        <button type="submit" class="btn btn-default">提交</button>
                        <a href='${path}/del/pet/${requestScope.pet.pId}'><button type="button" class="btn btn-danger" onclick="return window.delpet()">删除</button></a>
                        <%--${requestScope.pet.pId}--%>
                    </div>
                </div>

            </form>
            <p style="height: 50px"></p>
        </div>

        <div class="clear"></div>
    </div>
</div>



<script src="${path}/js/person/person.js"></script>
<script src="${path}/js/person/images/bootstrap-datepicker.js"></script>
<script src="${path}/plugins/layui/layui.js"></script>
<script src="${path}/js/person/area.js"></script>
<script src="${path}/js/person/select.js"></script>
<script src="${path}/js/person/laydate/laydate.js"></script>
<script type="text/javascript">

    //外部js调用
    laydate({
        elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
        event: 'focus',//响应事件。如果没有传入event，则按照默认的click
        type:'date'
        // format: 'YYYY-MM-DD hh:mm:ss'
    });
    function jg() {
        var str="";

        str=$("#province").val() + $("#city").val() + $("#district").val();
        alert(str);
        // alert($("#hello").value)
        // alert($("#hello").type())
    }

    // 选择图片显示
    function imgChange(obj) {
        //获取点击的文本框
        var file =document.getElementById("files");
        var imgUrl =window.URL.createObjectURL(file.files[0]);
        var img =document.getElementById('imghead');
        document.getElementById('petimg').value=imgUrl;
        img.setAttribute('src',imgUrl); // 修改img标签src属性值
        alert(imgUrl);
    };

    function perimgChange(obj) {
        //获取点击的文本框
        var file =document.getElementById("inputImage");
        var imgUrl =window.URL.createObjectURL(file.files[0]);
        var img =document.getElementById('perimghead');
        document.getElementById('newimg').value=imgUrl;
        img.setAttribute('src',imgUrl); // 修改img标签src属性值
        alert(imgUrl);
    };

    function delpet(){

        var flag = window.confirm("确定要删除么 ?");
        if(flag == true){
            alert("删除成功,即将跳回个人中心");
            <%--window.location ='${path}/del/pet'+${requestScope.pet};--%>
        }
        else {
            return false;
        }
    }
    
    function person() {
        if(confirm('是否确认提交?')==true){
            alert("操作成功,即将返回个人中心");
            return true;
        }else{
            return false;
        }
    }

    function deitpet() {
        if(confirm('是否确认提交?')==true){
            alert("操作成功啦,即将返回个人中心");
            return true;
        }else{
            return false;
        }
    }


</script>
</body>
</html>
